import React from 'react';
import { useDispatch } from 'react-redux';
import { useAppSelector } from '../store';
import { clearDoneAction, updateTypeAction } from '../store/action/todo';
import { SelectType } from '../store/reducer/todo';

export default function Footer() {
  const dispatch = useDispatch();
  // 7.4 获取state.type
  const { type } = useAppSelector((state) => state.todo);
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          {/* 7.5 通过排它加上className */}
          <a
            // 8.4 点击触发dispatch
            onClick={() => dispatch(updateTypeAction(SelectType.ALL))}
            className={type === SelectType.ALL ? 'selected' : ''}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            // 8.4 点击触发dispatch
            onClick={() => dispatch(updateTypeAction(SelectType.ACTIVE))}
            className={type === SelectType.ACTIVE ? 'selected' : ''}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            // 8.4 点击触发dispatch
            onClick={() => dispatch(updateTypeAction(SelectType.COMPLETED))}
            className={type === SelectType.COMPLETED ? 'selected' : ''}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button
        className="clear-completed"
        // 4.4 通过dispatch触发action
        onClick={() => dispatch(clearDoneAction())}
      >
        清除已完成
      </button>
    </footer>
  );
}
